<template>
  <div class="clause">
    <ContentBox :fixed="true" @left="back" :title="title">
      <template slot="oleft"><van-icon color="#000000" name="arrow-left"/></template>
    </ContentBox>
    <div v-html="value"></div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      title: '',
      code: '',
      value: ''
    }
  },
  methods: {
    getClause () {
      this.$axios.get(`/api/clause/${this.code}`).then(res => {
        if (res.status === 200) {
          this.value = res.data.content
        }
      })
    },
    back () {
      if (this.$store.state.pl === 'H5') {
        this.$router.go(-1)
      } else if (this.$store.state.pl === 'ANDROID') {
        AndroidJsBridge.finish()
      } else if (this.$store.state.pl === 'IOS') {
        window.iosCallHandler('popVC')
      }
    }
  },
  created () {
    if (this.$route.query.code === 'privacy_policy') {
      this.title = '隐私政策'
    } else if (this.$route.query.code === 'user_agreement') {
      this.title = '用户协议'
    } else if (this.$route.query.code === 'merchant') {
      this.title = '会员申请协议'
    } else if (this.$route.query.code === 'about_us') {
      this.title = '关于我们'
    }
    this.code = this.$route.query.code
    this.getClause()
  }
}
</script>

<style lang="scss">
.clause{
  height: 100%;
  padding: .88rem .24rem 0;
  & img{
    width: 100%;
  }
}
</style>
